<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试接口跨域问题</title>
  <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
   <!-- 由于当前网页打开的是静态网页，用的是file协议
        然而在当前网页的file协议想访问http协议的接口，这就有跨域问题
   -->
   <div>
      <button id="btnGet">测试GET</button>
      <button id="btnPost">测试POST</button>
      <button id="btnDelete">测试DELETE</button>
      <button id="btnJsonp">测试JSONP</button>
   </div>
   <script type='text/javascript'>
      $(function(){
         $('#btnGet').on('click',function(){
             $.ajax({
                type:'GET',
                url:'http://127.0.0.1:8080/api/get',
                data:{
                  name:'Aggie',
                  age:24
                },
                success:function(res){
                  console.log(res);
                }
             })
         })

         $('#btnPost').on('click',function(){
             $.ajax({
                type:'POST',
                url:'http://127.0.0.1:8080/api/post',
                data:{
                  name:'Aggie',
                  age:24
                },
                success:function(res){
                  console.log(res);
                }
             })
         })

         $('#btnDelete').on('click',function(){
             $.ajax({
                type:'DELETE',
                url:'http://127.0.0.1:8080/api/delete',
                success:function(res){
                  console.log(res);
                }
             })
         })

         $('#btnJsonp').on('click',function(){
             $.ajax({
                type:'GET',
                dataType:'jsonp',
                url:'http://127.0.0.1:8080/api/jsonp',
                success:function(res){
                  // console.log('ok');
                  console.log(res);
                }
             })
         })
      })
   </script>
</body>
</html>